<template>
    <div id="GcSentTime" ref="GcSentTime" class="linePage"></div>
</template>>

<script>
import { fetchData } from '@/api/index.js';
import bus from 'common/bus.js';

export default {
    data() {
        return {
            postData: {
                opera: 'hostCpuMemory',
                curPage: 1,
                pageSize: 20,
                sort: {
                    sortColumn: '',
                    sortOrders: ''
                },
                filtersType: 'fuzzyquery',
                filters: {
                    "monid": "228B951118944B3DA53D6AA9FC14DA79",
                },
            },
            date : this.testData2(),
            GcSentTime: {},
            CPUx: 0,
            CPUy: 0,
            EChartsOption: {
                animationDuration: 100,
                animationEasingUpdate: 'quinticInOut',
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    top: '14%',
                    left: '-13%',
                    height: '93%',
                    width: '100%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    splitLine: {
                        show: false,
                        lineStyle: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLable:{
                        show: false
                    },
                    data: this.testData(),
                    axisLine: {color:'rgb(29, 140, 248)',lineStyle:{color:'rgb(29, 140, 248)'}},
                },
                yAxis: {
                    type: 'value',
                    max: 100,
                    min: 0,
                    interval: 25,
                    boundaryGap: ['5%', '5%'],
                    splitLine: {
                        show: false
                    },
                    axisLine: {color:'rgb(29, 140, 248)',lineStyle:{color:'rgb(29, 140, 248)'}},
                },
                series: [{
                    name: '内存使用率',
                    data: this.date,
                    type: 'line',
                    color: 'rgb(194, 131, 213)',
                    showSymbol: false,
                    markLine: {
                        symbol:'none',
                        silent: false,
                        lineStyle: {
                            opacity: 0.4,
                            type: 'dotted'
                        },
                        data: [{
                            name: '123',
                            yAxis: 25
                        }, {
                            yAxis: 50
                        }, {
                            yAxis: 75
                        }, {
                            yAxis: 100
                        }]
                    }
                }]
            },
            timerName: 'GcSentTime',
            timerEventName: 'timerGcSentTime',
            timerInterval: 1000 * 60
        }
    },
    created() {
        this.getData();
        

        bus.$emit('timerNewTodo', {
            name: this.timerName,
            eventName: this.timerEventName,
            interval: this.timerInterval,
            intervalNow: 0
        });

        bus.$on(this.timerEventName, msg => {
            if (msg.isGetData) {
                let axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');
                this.getData();
                this.date.shift();
                let _new = Math.floor((Math.random() * 30) + 35);
                this.date.push(_new);
                this.EChartsOption.xAxis.data.shift();
                this.EChartsOption.xAxis.data.push(axisData);
                this.GcSentTime.setOption({
                    xAxis: {
                        data: this.EChartsOption.xAxis.data
                    },
                    series: {
                        data: this.date
                    }
                })
            }
        });
    },
    mounted() {
        this.GcSentTime = this.$echarts.init(this.$refs.GcSentTime);
        this.drawCPULine();
        window.onresize= () =>{
            let myEchart = this.$echarts.init(this.$refs.GcSentTime);
            myEchart.resize();
        }
    },
    computed: {
        postDataFn() {
            return {
                postData : JSON.stringify(this.postData)
            }
        }
    },
    methods: {
        getData(){
            fetchData(
                this.postDataFn
            ).then((res) => {
                if (res.data.length > 0) {
                    
                }
            });
        },
        drawCPULine(){
            this.GcSentTime.setOption(this.EChartsOption);
        },
        testData() {
            let _arr = [];
            for (let i = 0; i < 60; i++) {
                _arr.push('');
            }
            
            return _arr;
        },
        testData2() {
            let _arr = new Array(60);
            
            return _arr;
        }
    },
    beforeDestroy() {
        bus.$emit('timerNewTodo', {
            name: this.timerName
        });
        
        this.GcSentTime.dispose();
    }
}
</script>
<style scoped>
.linePage{
    min-height: 100px;
    min-width: 50px;
}
</style>